<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<script type="text/javascript" th:src="@{/mylayer.js}"></script>
	<title>购物车</title>
</head>
<body>
	<!-- 顶部tab -->
	<div th:replace="fragments/common::top-tab"></div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" th:href="@{/}"><img th:src="@{/images/icons/whlogo.png}" alt="旺和" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
				<form action="udai_shopcart_pay.html" class="shopcart-form__box">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th style="display: none">id</th>
								<th width="150">
									<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
								</th>
								<th width="350">商品信息</th>
								<th width="150">单价/元</th>
								<th width="200">数量</th>
								<th width="150">总价/元</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="cartVO:${list}">
								<th class="cart_id" style="display: none" th:text="${cartVO.getId()}"></th>
								<th scope="row">
									<label class="checked-label"><input class="check_cart" type="checkbox" th:checked="${cartVO.getChecked()==1}"><i></i>
										<div class="img" ><img th:src="${cartVO.getProductMainImage()}" th:alt="${cartVO.productName}" class="cover"></div>
									</label>
								</th>
								<td>
									<a th:href="@{/product/getProductDetailPage(id=${cartVO.productId})}"><div class="name ep3"  th:text="${cartVO.productName}"></div></a>
									<div class="type c9">邮费：0元  商家：平台自营</div>
								</td>
								<td class="product_price" th:text="${cartVO.getProductPrice()}"></td>
								<td>
									<div class="cart-num__box">
										<input type="button" class="sub" value="-">
										<input readonly type="text" class="val" th:value="${cartVO.getQuantity()}" >
										<input type="button" class="add" value="+">
									</div>
								</td>
								<td class="product_total_price" th:text="${cartVO.getProductPrice()*cartVO.getQuantity()}"></td>
								<td><a class="del_cur" href="">删除</a></td>
							</tr>
						</tbody>
					</table>
					<div class="user-form-group tags-box shopcart-submit pull-right">
						<button id="to_order" type="button" class="btn">去结算</button>
					</div>
					<div class="checkbox shopcart-total">
						<label><input type="checkbox" class="check-all"><i></i> 全选</label>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="del_selected" href="">删除选中</a>
						<div class="pull-right">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
							<b class="cr">¥<span id="total_price" class="fz24">00.00</span></b>
						</div>
					</div>
					<script th:inline="javascript">
						calculateTotalPrice();
						$(document).ready(function(){
							var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
								$check_all = $('.check-all');
							// 全选
							$check_all.on('change', function() {
								var checked= $(this).prop('checked')
								$check_all.prop('checked',checked);
								$item_checkboxs.prop('checked',checked);
								$item_checkboxs.each(function() {
									var parent_th=$(this).parents('th');
									var cart_id=parent_th.siblings(".cart_id").text();
									var checkednum=1;
									if (this.checked) {
										checkednum=1;
									} else {
										checkednum=0;
									}
									$.post(
										[[${#request.getContextPath()}]]+"/cart/changeCartSelective",
										{'id':cart_id,'checked':checkednum},
										function(data) {
											if(data.code!=0){
												mylayer.errorMsg(data.msg);
											}
										},
										'json'
									);
								});
								//总价
								calculateTotalPrice();
							});
							//购物车选中事件
							$(".check_cart").change(function() {
								var parent_th=$(this).parents('th');
								var cart_id=parent_th.siblings(".cart_id").text();
								var checkednum=1;
								if (this.checked) {
									checkednum=1;
								} else {
									checkednum=0;
								}
								$.post(
									[[${#request.getContextPath()}]]+"/cart/changeCartSelective",
									{'id':cart_id,'checked':checkednum},
									function(data) {
										if(data.code!=0){
											mylayer.errorMsg(data.msg);
										}
									},
									'json'
								);
								calculateTotalPrice();
							});
							// 点击选择
							$item_checkboxs.on('change', function() {
								var flag = true;
								$item_checkboxs.each(function() {
									if (!$(this).prop('checked')) { flag = false }
								});
								$check_all.prop('checked', flag);
							});
							// 个数限制输入数字
							$('input.val').onlyReg({reg: /[^0-9.]/g});
							// 加减个数
							$('.cart-num__box').on('click', '.sub,.add', function() {
								var value = parseInt($(this).siblings('.val').val());
								var parentTd=$(this).parents('td');
								var cart_id=parentTd.siblings(".cart_id").text();
								var product_price=parseFloat(parentTd.siblings(".product_price").text());
								var product_total_price_td=parentTd.siblings(".product_total_price");
								if ($(this).hasClass('add')) {
									// 添加数量操作
									$(this).siblings('.val').val(Math.min((value += 1),99));
								} else {
									$(this).siblings('.val').val(Math.max((value -= 1),1));
								}
								var num=$(this).siblings('.val').val();
								$.post(
									[[${#request.getContextPath()}]]+"/cart/changeCartSelective",
									{'id':cart_id,'quantity':num},
									function(data) {
										if(data.code!=0){
											mylayer.errorMsg(data.msg);
										}
									},
									'json'
								);
								product_total_price_td.text((num*product_price).toFixed(2))
								calculateTotalPrice();
							});
							//单个删除
							$('.del_cur').click(function (){
								var parent_td=$(this).parents('td');
								var cart_id=parent_td.siblings(".cart_id").text();
								$.post(
									[[${#request.getContextPath()}]]+"/cart/deleteById",
									{'id':cart_id},
									function(data) {
										if(data.code!=0){
											mylayer.errorMsg(data.msg);
										}else{
											mylayer.okMsg(data.msg);
											location.reload();
										}
									},
									'json'
								);
							})
							//选中删除
							$('.del_selected').click(function (){
								var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]')
								$item_checkboxs.each(function() {
									var parent_th=$(this).parents('th');
									var cart_id=parent_th.siblings(".cart_id").text();
									if (this.checked) {
										$.post(
											[[${#request.getContextPath()}]]+"/cart/deleteById",
											{'id':cart_id},
											function(data) {
												if(data.code!=0){
													mylayer.errorMsg(data.msg);
												}else{
													mylayer.okMsg(data.msg);
												}
											},
											'json'
										);
									}
								});
								//总价
								$('#total_price').text(total_price.toFixed(2));
								var button = $("#submit_order");
								if(total_price<=0){
									button.prop("disabled", true);
								}else {
									button.prop("disabled", false);
								}
							})
							//提交订单
							$('#to_order').click(function (){
								var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]');
								var num=0;
								$item_checkboxs.each(function() {
									if (this.checked) {
										num++;
									}
								});
								if(num==0){
									return;
								}
								location.href=[[${#request.getContextPath()}]]+"/order/getOrderConfirmPage";
							})
						});
						function calculateTotalPrice(){
							var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]')
							var total_price=0.0;
							$item_checkboxs.each(function() {
								var parent_th=$(this).parents('th');
								var product_total_price=parseFloat(parent_th.siblings(".product_total_price").text());
								if (this.checked) {
									total_price+=product_total_price;
								}
							});
							//总价
							$('#total_price').text(total_price.toFixed(2));
							var button = $("#submit_order");
							if(total_price<=0){
								button.prop("disabled", true);
							}else {
								button.prop("disabled", false);
							}
						}
					</script>
				</form>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div th:replace="fragments/common::right-menu"></div>
	<!-- 底部信息 -->
	<div th:replace="fragments/common::bottom-bar"></div>
</body>
</html>